<script setup>
import { ref, provide } from 'vue'
import { Edit, View, Plus } from '@element-plus/icons-vue'

import { repGetReportService } from '@/api/report.js'

import pagination from '../../components/pagination.vue'
import drawer from '../../components/drawer.vue'
import selectcomp from '../../components/select.vue'

// 后端获取的表格所需的数据
const tableDate = ref([])
// 用来展示的数据
const showTableData = ref([])
const reportTable = ref()

// 获取数据
const getReport = async() => {
    const { data } = await repGetReportService()
    tableDate.value = data.data
}

// 下拉菜单
const selectComp = ref()

// 第一次展示数据
const firstShowData = async() => {
    await getReport()
    showTableData.value = tableDate.value
}

const giveDrawerValue = async() => {
    getReport()
    firstShowData()
}

// 通过provide将获取数据的方法提供给子组件使用
provide('getReport', giveDrawerValue)

firstShowData()

// 搜索所需的数据
const searchData = ref({
    subject: '',
    title: ''
})

// 搜索的方法
const searchComputed = () => {
    searchData.value.subject = selectComp.value.selectValue
    if (searchData.value.subject) {
        let standby = []
        tableDate.value.forEach(item => {
            if (searchData.value.subject === item.subject && item.title.includes(searchData.value.title)) {
                standby.push(item)
            }
        })
        showTableData.value = standby
    }

}

// 搜索按钮
const searchBtn = () => {
    searchComputed()
}

// 重置按钮
const resetBtn = () => {
    searchData.value.subject = ''
    searchData.value.title = ''
    selectComp.value.selectValue = ''
    firstShowData()
}

// 接收子组件--每页展示多少条数据
// 每页条数
const pageSize = ref()
// 当前页数
const currentPage = ref()

const pageSizes = (obj) => {
    pageSize.value = obj.pageSize.value
    currentPage.value = obj.currentPage.value
}

// 行点击事件
const stuHandleClick = (row) => {
    reportTable.value.toggleRowSelection(row)
}

// 点击多个，只显示一个
const stuHandleSelectionChange = (row) => {
    if (row.length > 1) {
        reportTable.value.clearSelection()
        reportTable.value.toggleRowSelection(row.pop())
    }
}

// 抽屉的操作------------------------------------------------------------------------
const drawerBox = ref()

// 抽屉的标题
const title = ref()

// 数据的状态
const status = ref()

// 每一行的id号
const rowId = ref()



// 新增按钮事件
const addReport = () => {
    drawerBox.value.changeDrawerState()
    drawerBox.value.drawerDate('edit', {})
    title.value = '新增实验报告',
    status.value = 'add'
}

// 查看和编辑
const openDrawer = (state, row) => {
    drawerBox.value.changeDrawerState()
    drawerBox.value.drawerDate(state, row)
    // 查看
    if (state === 'view') {
        title.value = '查看实验报告'
    }
    // 编辑
    if (state === 'edit') {
        title.value = '编辑实验报告',
        status.value = 'edit',
        rowId.value = row.id
    }
}

const pageArray = ref([10, 20, 30 ,40, 70])

</script>

<template>
    <div class="report">
        <!-- 下拉菜单 -->
        <div class="select-box">
            <el-form inline="true" label-width="80">
                <el-form-item>
                    <selectcomp ref="selectComp"></selectcomp>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchData.title" placeholder="请输入实验名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchBtn">搜索</el-button>
                    <el-button @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 新增/编辑实验报告 -->
            <el-button :subject="''" :icon="Plus" color="#626aef" plain @click="addReport">新增</el-button>
        </div>

        <!-- 表格模块 -->
        <div class="table">
            <el-table 
                :data="showTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                height="500"
                ref="reportTable"
                highlight-current-row 
                border 
                show-overflow-tooltip
                @row-click="stuHandleClick"
                @selection-change="stuHandleSelectionChange" 
                :row-class-name="rowClassName"
                
                >
                <el-table-column type="selection" width="50"></el-table-column>
                <!-- <el-table-column label="编号" type="index" index="1" width="80"></el-table-column> -->
                <el-table-column label="科目" prop="subject" width="120" sortable></el-table-column>
                <el-table-column label="实验名称" prop="title" width="200" sortable></el-table-column>
                <el-table-column label="实验内容" width="auto" sortable>
                    <template #default="scoped">
                        {{ scoped.row.principle || scoped.row.step || scoped.row.result }}
                    </template>
                </el-table-column>
                <el-table-column label="更新日期" prop="date" width="160" sortable></el-table-column>
                <el-table-column label="状态" width="100" sortable>
                    <template #default="scoped">
                        {{ scoped.row.state ? '已提交' : '待提交' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template #default="scoped">
                        <el-button @click="openDrawer('view', scoped.row)" type="success" :icon="View" circle plain></el-button>
                        <el-button @click="openDrawer('edit', scoped.row)" :class="{ active: scoped.row.state }" type="primary" :icon="Edit" circle
                            plain></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination">
            <pagination :tableDataTotal="showTableData.length" @page-sizes="pageSizes" :pageArray="pageArray"></pagination>
        </div>

        <!-- 弹框 -->
        <drawer ref="drawerBox" :title="title" :status="status" :rowId="rowId"></drawer>
    </div>
</template>

<style lang="scss" scoped>
.active {
    visibility: hidden;
}

.report {
    padding: 10px;
    position: relative;

    .select-box {
        display: flex;
        justify-content: space-between;
    }

    .pagination {
        position: fixed;
        bottom: 3px;
        background-color: #fff;
        z-index: 999;
    }
}

::v-deep .el-table__header .cell {
    text-align: center;
}
::v-deep .el-table__header tr th {
    background-color: #A3D4F5;
    color: #4b4b4b;
}

::v-deep .el-tabs__item {
    font-weight: bold;
}

::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
    display: none;
}

::v-deep .el-table__body tr.current-row > td.el-table__cell {
background-color: #828cff;
color: #fff;
}

</style>